import {
  size,
  IFormProps,
  pageSize,
  dateTimeFormat,
  getImages
} from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm } from "antd";
import { PaginationProps } from "antd/lib/pagination";
import moment from "moment";
const Styles = require("../../styles/index.less");
import * as api from "../../api/api";
//import CrowdEdit from "../../components/crowd/crowdcateEdit";
import Business from "../..//components/malls/businessScopeEdit";

export interface IBusinessScopePros extends IFormProps {
  item: any;
}
class BusinessScope extends React.PureComponent<IBusinessScopePros, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    this.getBusinessScope();
  }
  search = () => {
    this.getBusinessScope();
  };

  getBusinessScope = (payload?) => {
    payload = Object.assign({}, this.props.item.businessScopeSearchs, this.props.form.getFieldsValue(), { ...payload });
    this.props.dispatch({
      type: "item/getBusinessScope",
      payload
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  newBusinessScope = () => {
    this.edit();
  };


  edit = (businessScope = {}) => {
    this.props.dispatch({
      type: "item/save",
      payload: { businessScope }
    });
    this.setVisible(true);
  };

  setVisible = (visible = false) => {
    this.setState({ visible });
  };

  save = form => {
    form = Object.assign({}, form);
    this.props.dispatch({
      type: "item/saveBusinessScope",
      payload: {
        form,
        callback: () => {
          this.setVisible();
        }
      }
    });
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const {
      businessScope,
      businessScopes: { totalCount, items },
      businessScopeSearchs: { pageIndex, pageSize, keywords }
    } = this.props.item;
    const pageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({},
        this.props.item.businessScopeSearchs,
        { pageIndex, pageSize });
      this.getBusinessScope(payload);
    }


    const pagination: PaginationProps | boolean = {
      total: totalCount,
      defaultCurrent: 1,
      current: pageIndex,
      pageSize: pageSize,
      showSizeChanger: true,
      showTotal: (total) => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: pageChange,
      onChange: pageChange
    };

    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Col span={24}>
            <Form layout="inline">
              <Form.Item>
                {getFieldDecorator("keywords", {
                  initialValue: keywords
                })(<Input
                  style={{ width: 200 }}
                  size={size}
                  placeholder="输入类别名称"
                />)}
              </Form.Item>
              <Form.Item>
                <Button size={size} onClick={this.newBusinessScope}>
                  新增
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  size={size}
                  type="primary"
                  loading={loading}
                  onClick={this.search}
                >
                  查询
                </Button>
              </Form.Item>
            </Form>
            <Col span={24}>
              <hr className={Styles.hrBorder} />
              <h3>经营范围列表</h3>
            </Col>
            <Col span={24}>
              <Table
                dataSource={items}
                bordered
                pagination={pagination}
                rowKey={(record: api.SingleUserMallItemsVOBusinessScopeVO) =>
                  String(record.id)
                }
                loading={loading}
              >
                <Table.Column
                  title="序号"
                  key="no"
                  render={(text, record, index) => {
                    return index + 1;
                  }}
                />
                <Table.Column title="类别名称" key="name" dataIndex="name" />
                <Table.Column title="是否启用" key="isUse" render={(text, record: api.SingleUserMallItemsVOBusinessScopeVO, index) => {
                        return record.isUse ? '启用' : '禁用'
                    }} />
                <Table.Column
                  title="操作"
                  render={(
                    text,
                    record: api.SingleUserMallItemsVOBusinessScopeVO,
                    index
                  ) => {
                    return (
                      <div>
                        <a
                          className={Styles.M_RIGHT}
                          onClick={() => this.edit(record)}
                        >
                          编辑
                        </a>
                      </div>
                    );
                  }}
                />
              </Table>
            </Col>
          </Col>
        </Row>
        {this.state.visible ? (
          <Business
            visible={this.state.visible}
            businessScope={businessScope}
            onSave={this.save}
            onCancel={this.setVisible}
          />
        ) : (
            undefined
          )}
      </Row>
    );
  }
}

export default connect(({ item, loading: { models: { item: loading } } }) => ({
  item,
  loading
}))(Form.create()(BusinessScope));
